<template>
  <div class="data_base">
    <div class="b-f p-d">
      <el-form ref="form" :model="form" label-width="180px">
        <el-form-item label="数据备份间隔时间：">
          <el-radio-group v-model="form.interval">
            <el-radio
              v-for="(item, index) in intervals"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备份方式：">
          <el-radio-group v-model="form.type">
            <el-radio label="full">全量备份</el-radio>
            <el-radio label="incremental">增量备份</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" size="small" @click="autoMethod"
            >开启自动备份</el-button
          >
          <el-button size="small" @click="manualMethod">立即手动备份</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="b-p-f m-t">
      <TableComp
        ref="multipleTable"
        :tableData="tableData"
        :tableConfig="tableConfig"
        :tableAction="tableAction"
        :isSelect="false"
        :isIndex="true"
        :isShowPage="true"
        :queryParams="queryParams"
        @getPagination="getList"
      ></TableComp>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      intervals: [
        {
          label: '每天',
          value: 86400000,
        },
        {
          label: '每周',
          value: 604800000,
        },
        {
          label: '每月',
          value: 2592000000,
        },
      ],
      form: {
        interval: 86400000,
        type: 'full',
      },
      queryParams: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      tableData: [],
      tableConfig: [
        {
          prop: 'backupTime',
          label: '备份时间',
        },
        {
          prop: 'backupStyle',
          label: '备份方式',
        },
        {
          prop: 'backupType',
          label: '备份类型',
        },

        {
          prop: 'backupStatus',
          label: '状态',
        },
      ],
      tableAction: {
        align: () => 'center',
        width: () => String(60 * 2),
        operations: [
          {
            label: '数据恢复',
            isLink: true,
            type: 'primary',
            method: (row) => {
              this.recoveryTask(row.id);
            },
          },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      let params = {
        pageNum: this.queryParams.currentPage,
        pageSize: this.queryParams.pageSize,
      };
      this.$axios
        .post(this.$api.setting.backupApi.getBackList, params)
        .then((res) => {
          const { data, code } = res.data;
          if (code == 200) {
            this.tableData = data.rows || [];
            this.queryParams.total = data.total || 0;
          }
        });
    },
    recoveryTask(id) {
      this.$axios
        .get(this.$api.setting.backupApi.getrecovery, {
          params: {
            backUpId: id,
          },
        })
        .then(() => {
          this.$message({
            type: 'success',
            message: '数据恢复成功!',
          });
          this.getList();
        });
    },
    autoMethod() {
      this.$axios
        .post(this.$api.setting.backupApi.getAuto, this.form)
        .then((res) => {
          const { data, code } = res.data;
          if (code == 200) {
            this.getList();
          }
          this.getList();
        })
        .catch(() => {
          this.getList();
        });
    },
    manualMethod() {
      this.$axios
        .post(this.$api.setting.backupApi.getManual, this.form)
        .then((res) => {
          const { data, code } = res.data;
          if (code == 200) {
            this.getList();
          }
          this.getList();
        })
        .catch(() => {
          this.getList();
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>
